<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对DOMContentLoaded的研究</title>
	<style>
	  img{
		  width: 100%;
		}
	</style>
	<!-- 如果样式放在这里, css加载不出来, 则下面的js一直不执行, 因为js的执行依赖于CSSDOM的构成  -->
	<!-- <link rel="stylesheet" href="https://drive.google.com/_/drive_fe/_/ss/k=drive_fe.main.dagwiowyfl6p.L.W.O/am=2eRuuHI/d=0/rs=AFB8gsyUD6ThT0Nzerf8SKuC_alqlA3doA"> -->
	<script>
	  var log = function(msg) {
		  console.log(msg)
		}

	  log('执行head里的js')

	  window.onload = log.bind(null, '图片加载完成, 才window.onload')

    // 兼容性IE9+, IE8要用readystatechange的hack
    // https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

    // 不能使用事件句柄, 只能监听事件, 下面的代码无效
		// document.onDOMContentLoaded = log.bind(null, 'document.DOMContentLoaded') 

		// domContentLoaded marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution 
		// 如果外链js没有async标志, 则js必须在该事件前执行完毕
		document.addEventListener("DOMContentLoaded", function(event) {
		  alert('DOMContentLoaded, 可以渲染页面了')
		  log("DOMContentLoaded. 该事件是否依赖css的加载, 取决于: css后面是否还有js. 如果有, 则css加载完成, js执行完毕, 才触发. 如果js在css前面, 则先执行js, 再生成DOM,  之后触发该事件, 不依赖css的加载");
      log("也即, DOMContentLoaded不意味着CSSDOM ready. 这是在Chrome55试验得出的结论")
		});
		
	</script>
	<!-- 样式放在这里, 把后面的js注释掉, 则不等css加载完成就触发 DOMContentLoaded. 不过页面还是空白的, 因为DOM需要CSSDOM才能组合成Render Tree -->
	<link rel="stylesheet" href="https://drive.google.com/_/drive_fe/_/ss/k=drive_fe.main.dagwiowyfl6p.L.W.O/am=2eRuuHI/d=0/rs=AFB8gsyUD6ThT0Nzerf8SKuC_alqlA3doA">
	<!-- 下面的js会阻塞DOM的构成; 而js的执行又会等待CSSDOM的构成 -->
	<!-- 如果把下面的js注释掉, 则因为后面没有js, DOM的构成不受css加载未完成的影响, 可以直接触发DOMContentLoaded事件 -->
	<script>
		console.log('外链样式后面的js: for 循环开始')
	  for(i = 0; i < 100000; i++){}
		console.log('外链样式后面的js: for 循环结束')
	</script>
</head>
<body>
  <p>本页面不翻墙时, 验证效果更佳</p>
	<img id="img" src="https://www.google.com/logos/doodles/2017/martin-luther-king-jr-day-2017-5634777509003264-hp2x.jpg" alt="这是一张要翻墙才能成功加载的图片">
	<div>
	  <p>这是不翻墙时, css放在js前面的执行结果</p>
		<p>虽然截图的文字有些更改, 但还是可以看出: 直接css加载超时, 才执行head里面的js</p>
	  <img src="http://oc9l6hs7x.bkt.clouddn.com/onload-console.png" alt="这是不翻墙时, css放在js前面的执行结果">
	</div>
	<div>
	  <p>浏览器渲染过程</p>
	  <img src="http://www.igvita.com/posts/12/doc-render-js.png" alt="render tree">
	</div>
	<div>
  	<a href="javascript:document.write('');location.reload()">置空文档,并刷新</a>
	</div>
</body>
</html>
